<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018-11-23
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 员工信息管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="${pageContext.request.contextPath}/assets/shipui/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css"  media="all">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager" style="font-size: 14px;margin-left: 15px">

                        <ul class="folder-list m-b-md" style="padding: 0px">
                            <li>
                                <a href="toSystemHome.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0"></i>企业信息</a>
                            </li>
                            <li>
                                <a href="toPersonalInfo.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0;"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="toStaffInfo.do"  style="color: #0d8ddb;font-weight: 700"> <i class="fa fa-circle text-navy" style="color: #0d8ddb"></i>员工管理</a>
                            </li>
                        </ul>

                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="toGoodName.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>货种名称配置</a>
                            </li>
                            <li>
                                <a href="toGooderName.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>货主名称配置</a>
                            </li>
                            <li>
                                <a href="toLogistics.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>港口名称配置</a>
                            </li>
                        </ul>

                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="toRecharge.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>账户充值</a>
                            </li>
                            <li>
                                <a href="toRechargeDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>充值记录</a>
                            </li>
                            <li>
                                <a href="toExpensesDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>消费记录</a>
                            </li>
                            <li>
                                <a href="toFindShipDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>找船记录</a>
                            </li>
                        </ul>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="mail-box">
                <div class="mail-body" style="height: 660px">
                    <div class="row">
                        <div class="col-sm-6"> <h3>员工管理：</h3></div>
                        <div class="col-sm-6">   <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#addUsersModel">添加员工</button></div>
                    </div>

                    <hr class="simple" color="#6f5499" />
                    <div class="row" style="margin-top: 20px;padding: 15px">
                        <table class="layui-hide" id="staffInfoTable" lay-filter="staffInfoLay"></table>

                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>


<%--编辑运功信息模态框--%>
<div class="modal fade" id="addUsersModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:70%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h3 class="modal-title">
                    填写用户信息
                </h3>
            </div>
            <div class="modal-body">
                <div class="form-horizontal m-t" >
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-8">
                                    <input id="account" name="account" class="form-control" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">手机号：</label>
                                <div class="col-sm-8">
                                    <input id="phoneNum" name="PhoneNum" class="form-control" type="text">
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">密码：</label>
                                    <div class="col-sm-8">
                                        <input id="password" name="password" class="form-control" type="password" placeholder="此处密码填写为本账号登录时密码">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">角色：</label>
                                    <div class="col-sm-4" style="font-size: 14px;margin-top: 5px">
                                        <select class="form-control" id="roleSelect"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-8">
                                        <button class="btn btn-primary pull-left" id="sureToAdd"  type="submit">确定添加</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- end -->

    <%--编辑模态框--%>
    <div class="modal fade" id="editModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:40%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h3 class="modal-title">
                        编辑用户信息
                    </h3>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal m-t">
                        <div class="form-group">
                            <div class="row">
                                <label class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-8">
                                    <input id="idEdit" style="display: none" class="form-control" type="text">
                                    <input id="accountEdit" class="form-control" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <label class="col-sm-3 control-label">联系电话：</label>
                                <div class="col-sm-8">
                                    <input id="phoneEdit" class="form-control" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <label class="col-sm-3 control-label">角色：</label>
                                <div class="col-sm-4" style="font-size: 14px;margin-top: 5px">
                                    <select class="form-control" id="roleSelect1"></select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-3">
                                    <button class="btn btn-primary" onclick="editFinishBtn()">编辑完成</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->



    <script type="text/html" id="barDemo">
        <a style="color: #0d8ddb" lay-event="edit">编辑</a>
        <a style="color: #ff8872" lay-event="del">删除</a>
    </script>


    <!-- 全局js -->
    <script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js?v=3.3.6"></script>


    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath}/assets/shipui/js/content.js?v=1.0.0"></script>
    <script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/layui/layui.js" charset="utf-8"></script>

    <script>
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#staffInfoTable'
                ,url:'user/queryAllCompanyUser.do'
                ,cellMinWidth: 180 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'account', title: '用户名'},
                    {field:'phoneNum', title: '手机号'},
                    {field:'roleName', title: '角色'},
                    {field:'barDemo', title: '操作',toolbar: '#barDemo'}
                ]],
                skin: 'row' //表格风格
                ,even: true
                ,page: true //是否显示分页
                ,limits: [10,20,30,50]
                ,limit: 10 //每页默认显示的数量
            });

            //监听工具条
            table.on('tool(staffInfoLay)', function(obj){
                var data = obj.data;
                global = data;
                if(obj.event === 'edit'){
                    // layer.msg('ID：'+ data.id + ' 的查看操作');
                    showEditModel(data);
                } else if(obj.event === 'del'){
                    swal({
                        title: "确定删除用户"+global.account+"吗？",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "删除",
                        closeOnConfirm: false
                    }, function () {
                        var data = JSON.stringify({userId:global.id});
                        deleteAccount(data);
                    });
                }
            });

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

        function showEditModel(data) {
            $("#editModel").modal('show');
            $("#idEdit").val(data.id);
            $("#accountEdit").val(data.account);
            $("#phoneEdit").val(data.phoneNum);
            $("#roleSelect1").val(data.roleId);
        }


        //编辑用户设置角色选项
        $(function () {
            $.ajax({
                url:'config/queryRole.do',
                type:'GET',
                contentType:"application/json",
                dataType:'json',
                success:function (result) {
                    if (result.SUCCESS) {
                        var data = result.data;
                        for (var i in data) {
                            $("#roleSelect1").append("<option value=" + data[i].roleId + ">" + data[i].roleName + "</option>")
                        }
                    }
                    else {
                        alert(result.MSG);
                    }
                }
            })
        })




        function editFinishBtn() {
            var userId = $("#idEdit").val();
            var account = $("#accountEdit").val();
            var phoneNum = $("#phoneEdit").val();
            var roleId = $("#roleSelect1").val();
            if (!account || !phoneNum|| !roleId){
                swal({
                    title: "信息不能为空！",
                    type: "warning"
                });
                return false;
            }
            var data = JSON.stringify({userId:userId,account:account,phoneNum:phoneNum,roleId:roleId});
            $.ajax({
                url: 'user/editUser.do',
                data: data,
                dataType: 'json',
                type: 'post',
                contentType: "application/json",
                success: function (result) {
                    if (result.SUCCESS) {
                        swal({
                            title: "修改成功",
                            type: "success"
                        },function () {
                            location.reload();
                        });
                    }
                    else {
                        swal({
                            title: result.MSG,
                            type: "warning"
                        });
                    }
                }
            })
        }

        function deleteAccount(data) {
            $.ajax({
                url: 'user/deleteUser.do',
                data: data,
                dataType: 'json',
                type: 'post',
                contentType: "application/json",
                success: function (result) {
                    if (result.SUCCESS) {
                        swal({
                            title: "删除成功",
                            type: "success"
                        },function () {
                            location.reload();
                        });
                    }
                    else {
                        swal({
                            title: "删除失败",
                            type: "warning"
                        });
                    }
                }
            })
        }





    </script>



    <script type="text/javascript">

        //添加用户设置角色选项
        $(function () {
            $.ajax({
                url:'config/queryRole.do',
                type:'GET',
                contentType:"application/json",
                dataType:'json',
                success:function (result) {
                    if (result.SUCCESS) {
                        var data = result.data;
                        for (var i in data) {
                            $("#roleSelect").append("<option value=" + data[i].roleId + ">" + data[i].roleName + "</option>")
                        }
                    }
                    else {
                        alert(result.MSG);
                    }
                }
            })
        })



        //添加用户
        $("#sureToAdd").click(function(){
            if(!$('#account').val() ||!$('#phoneNum').val()){
                alert("添写信息不能为空");
                return false;
            }
            var data=JSON.stringify({account:$('#account').val(),phoneNum:$('#phoneNum').val(),roleId:$('#roleSelect').val(),password:$('#password').val()});
            $.ajax({
                url:'user/addUser.do',
                data:data,
                type:'post',
                contentType:"application/json",
                dataType:'json',
                success:function (result) {
                    swal({
                        title: "添加成功！",
                        type: "success"
                    });
                    location.href="toStaffInfo.do";
                }
            })
        })



    </script>


</body>

</html>
